* {
	margin: 0;
	padding: 0;
}
/*nav styles*/
.nav ul {
	background: white;
	border-top: 6px solid hsl(180, 40%, 60%);
	width: 150px;
	margin: 5em auto;
}

.nav ul li {
	list-style-type: none;
	/*relative positioning for list items along with overflow hidden to contain the overflowing ripple*/
	position: relative;
	overflow: hidden;
}

.nav ul li a {
	font: normal 14px/28px Montserrat;
	color: hsl(180, 40%, 40%);
	display: block;
	padding: 10px 15px;
	text-decoration: none;
	cursor: pointer; /*since the links are dummy without href values*/
	/*prevent text selection*/
	user-select: none;
	/*static positioned elements appear behind absolutely positioned siblings(.ink in this case) hence we will make the links relatively positioned to bring them above .ink*/
	position: relative;
}

/*.ink styles - the elements which will create the ripple effect. The size and position of these elements will be set by the JS code. Initially these elements will be scaled down to 0% and later animated to large fading circles on user click.*/
.nav .ink {
	display: block;
	position: absolute;
	background: hsl(180, 40%, 80%);
	border-radius: 100%;
	transform: scale(0);
}
/*animation effect*/
.nav .ink.animate {
	animation: ripple 0.65s linear;
}

@
keyframes ripple {
	/*scale the element to 250% to safely cover the entire link and fade it out*/
	100% {
	opacity: 0;
	transform: scale(2.5);
}

}
.pensonalDetails div p a {
	font: normal 20px Montserrat;
	/* 	display: block;  */
	padding: 10px 15px;
	text-decoration: none;
	cursor: pointer;
}

.pensonalDetails div p {
	padding: 10px 15px;
}

.pensonalDetails {
	border-top: 3px solid hsl(180, 40%, 60%);
	font: normal 15px Montserrat;
	padding: 20px 0px;
	position: relative;
	margin: 100px 50px 20px 50px;
}

.pensonalDetails #edit {
	position: absolute;
	top: 0;
	right: 0;
	margin: 10px 10px;
}

.save {
	padding: 20px 0px 0px 40px;
}

.saveBtn {
	padding: 3px 5px;
}

a:link {
	color: #000000;
}

a:visited {
	color: #000000;
}

a:hover {
	color: #999999;
}

input {
	font-size: 1.4em;
	height: 1.4em;
	border-radius: 4px;
	border: 1px solid #c8cccf;
	color: #6a6f77;
}
.password{
	border-top: 3px solid hsl(180, 40%, 60%);
	font: normal 18px Montserrat;
	margin:20px 50px;	
}

.password .update_password{
		
	margin:20px 30px;	

}

.password .edit_password{
	padding: 0px 50px;
}


















